<template>
	<div>
		<van-sticky>
			<header-top></header-top>
		
			<!-- van-search -->
			<van-search v-model="querys.room_search_param" 
						show-action 
						shape="round" 
						background="#FFD801" 
						placeholder="请输入搜索关键词" >
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>
			<van-dropdown-menu>
				<van-dropdown-item title="房间人数" 
								   v-model="querys.room_max" 
								   :options="option" 
								   @change="changeStatus('room_max')"></van-dropdown-item>
				<van-dropdown-item title="房间状态" ref="item">
					<van-cell center title="查看所有房间">
						<template #right-icon>
							<van-switch v-model="select_all_list" @change="changeStatus('status')" size="24" active-color="#ee0a24" />
						</template>
					</van-cell>
					<div style="padding: 5px 16px;">
						<van-button type="danger" block round @click="onConfirm()"> 确认 </van-button>
					</div>
				</van-dropdown-item>
			</van-dropdown-menu>

			<!-- closeable 模式，在右侧显示关闭按钮 -->
			<van-notice-bar left-icon="volume-o" mode="closeable" scrollable>技术是开发它的人的共同灵魂。</van-notice-bar>
		</van-sticky>
		
		<!-- van-empty 网络错误提示组件 -->
		<van-empty image="search" v-if="network_status === false">
			<van-button round class="bottom-button" type="danger" @click="onLoad()">链接服务器失败 点击重试...</van-button>
		</van-empty>
		

		<!-- 房间列表 -->
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="network_status === true">
			<van-list v-model="loading" 
					  finished-text="没有更多了" 
					  :finished="finished" 
					  @load="onLoad">
					 
				<van-collapse v-model="activeName" accordion> 
					<van-cell-group v-for="(item,index) in room_list" :key="index">
						<van-collapse-item size="large" 
										   :title="item.room_title" 
										   :label="item.room_number"
										   :name="index" 
										   icon="shop-o">			   
							<template #value>
								<van-col offset="15">
									<van-tag v-if="item.room_status === 2" 
											 type="success"
											 plain 
											 size="medium">游戏中</van-tag>
									<van-tag v-else-if="item.room_status === 1" 
											 type="primary" 
											 plain 
											 size="medium">空闲</van-tag>
									<van-tag v-else-if="item.room_status === 0" 
											 color="#7232dd" 
											 plain 
											 size="medium">已封禁</van-tag>
									<van-tag v-else type="warning"
											 plain 	
											 size="medium">error:{{item.room_status}}</van-tag>
								</van-col>
							</template>
							<van-row>
								<van-col>房间号：{{item.room_number}}</van-col>
							</van-row>
							<van-row>
								<van-col>房间人数：{{item.current}}/{{item.room_max}}</van-col>
							</van-row>
							<van-row gutter="20">
								<van-col span="8">当前人数：{{item.current}}</van-col>
								<van-col span="8">min：{{item.room_min}}</van-col>
								<van-col span="8">最大容量：{{item.room_max}}</van-col>
							</van-row>
							<van-row>
								<van-col>出题类型：{{item.room_words_type === 0?'无限制':item.room_words_type}}</van-col>
							</van-row>
							<van-row>
								<van-col>
									房间状态：
									<van-tag v-if="item.room_status === 2" 
											 type="success" 
											 plain 
											 size="medium">游戏中</van-tag>
									<van-tag v-else-if="item.room_status === 1" 
											 type="primary"
											  plain 
											 size="medium">空闲</van-tag>
									<van-tag v-else-if="item.room_status === 0" 
											 color="#7232dd" 
											 plain 
											 size="medium">已封禁</van-tag>
									<van-tag v-else 
											 type="warning" 
											 plain 
											 size="medium">error:{{item.room_status}}</van-tag>
								</van-col>
							</van-row>
							<br>
							<van-row>
								<van-button color="#FFD801" 
											v-if="item.room_status === 1"
											round 
											class="bottom-button" 
											type="danger" 
											@click="intoRoom(item,index)"> 进 入 游 戏 房 间 </van-button>
								<van-button color="#FFD801" v-else round  class="bottom-button" 
											type="danger" disabled> 无 法 进 入 </van-button>
							</van-row>
						</van-collapse-item>
					</van-cell-group>
				</van-collapse>
				
			</van-list>
		</van-pull-refresh>
		<!-- end 房间列表 -->
		
		<tabbar-bottom></tabbar-bottom>
	</div>
</template>
<script>
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
import headerTop from '../Common/headerTop.vue';
import tabbarBottom from '../Common/tabbarBottom.vue';

Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
	data() {
		return {
			querys:{
				room_search_param : '',
				room_max : '',
				room_status : 1,
				pageIndex : 1,
				pageSize : 10
			},
			select_all_list: false,
			option: [
				{ text: '所有游戏房间', value: 0 },
				{ text: '3人房间', value: 3 },
				{ text: '4人房间', value: 4 },
				{ text: '8人房间', value: 8 },
				{ text: '9人房间', value: 9 },
				{ text: '12人房间', value: 12 },
			],
			room_list: [],
			page_num:1,
			room_count:'',
			activeName:['0'],
			loading: false,
			finished: false,
			isLoading: false,
			network_status: true,	//获取房间列表是否成功
		};
	},
	methods: {
		onConfirm() {
			if (this.select_all_list == true) {
				this.querys.room_status = '';
			} else {
				this.querys.room_status = 1;
			}
			this.$refs.item.toggle();
			
			// 清空列表数据
			this.room_list = [];
			this.page_num  = 1;
			this.room_count='';
			this.querys.pageIndex = 1;
			
			this.finished  = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			//重新加载
			this.onLoad();
		},
		onSearch() {
			// 清空列表数据
			this.room_list = [];
			this.page_num  = 1;
			this.room_count='';
			this.querys.pageIndex = 1;
			
			this.finished  = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			//重新加载
			this.onLoad();
		},
		onLoad() {
			if (this.room_count != '') {
				if (this.room_list.length >= this.room_count) {
					this.finished = true;
				}
			}
			
			this.$post('/game/hall/room_list', this.querys).then(res => {
				if (res.code == 200 ){
					this.network_status = true;		//设置网络状态
					
					for(let i in res.data.data){
						this.room_list.push(res.data.data[i]);
					}
					
					this.room_count= res.data.count;
					if (res.data.count == 0 || res.data.count < this.querys.pageSize) {
						this.finished = true;
					} else {
						this.page_num++;		//下次执行页码自增
						this.querys.pageIndex = this.page_num;
						this.loading = false;	//加载状态结束
					}
				} else {
					this.$notify({ type: 'danger', message: '获取房间列表失败' });
					this.network_status = false;	//设置网络状态
				}
			}).catch((e) => {
				this.network_status = false;	//设置网络状态
				console.log(e);
				this.$notify({ type: 'danger', message: '连接服务器失败' });
			});
		},
		onRefresh() {
			// 清空列表数据
			this.room_list = [];
			this.page_num  = 1;
			this.room_count='';
			this.querys.pageIndex = 1;
			
			this.finished  = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			//重新加载
			this.onLoad();
			
			this.isLoading = false;
		},
		intoRoom(item,index) {
			
			this.$dialog.confirm({ message: '确认进入该房间吗？', theme: 'round-button' }).then(() => {
				//加载
				let toast = this.$toast.loading({ duration: 0, forbidClick: true, message: '请稍后...' });
				
				if(this.judgeRoomInformation(item,toast)){
					//发送请求，验证数据库中房间状态
					this.$post('/game/hall/into_room', item).then(res => {
						toast.clear();
						
						if (res.code == 200 ){
							if(this.judgeRoomInformation(res.data,toast)){
								let route_query = {'id':res.data.id,'room_number':res.data.room_number};
								this.$router.push({ path: "/game_room", query: route_query });
							} else {
								return false;
							}
						} else {
							this.$toast({ message: res.msg, duration: 1500 });
						}
					}).catch((e) => {
						console.log(e);
						this.$notify({ type: 'danger', message: '连接服务器失败' });
					});
				} else {
					return false;
				}	
			}).catch(() => {
			    return false;
			});
		},
		judgeRoomInformation(params,toast) {
			//判断房间状态
			if (params.room_status == 0) {
				toast.clear();
				this.$toast({ message: '该房间已被封禁，禁止操作',duration: 1500 });
				return false;
			} else if(params.room_status == 2) {
				toast.clear();
				this.$toast({ message: '该房间游戏已经开始，中途禁止加入',duration: 1500 });
				return false;
			} else {
				//判断房间人数
				if (params.current >= params.room_max) {
					toast.clear();
					this.$toast({ message: '该房间人数已满禁止加入',duration: 1500 });
					return false;
				} else {
					return true;
				}
			}
		},
		changeStatus($type) {
			if ($type == 'status') {
				if (this.select_all_list == true) {
					this.querys.room_status = '';
				} else {
					this.querys.room_status = 1;
				}
			} 
			
			// 清空列表数据
			this.room_list = [];
			this.page_num  = 1;
			this.room_count='';
			this.querys.pageIndex = 1;
			
			this.finished  = false;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			//重新加载
			this.onLoad();
		}
	},
	components: { headerTop ,tabbarBottom },
};
</script>
<style scoped lang="less">
	.van-empty {
	    padding: 35% 0;
	}
	.bottom-button {
	    width: 100%;
	    height: 40px;
	}
</style>